<template>
  <div class="userBankCard">
    <div class="bankCardMain">
      <el-row :span="24" class="projects"  v-for="item in bankCardList">
        <el-col :span="6">
          <img class="userImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512191560341&di=85f40065fe1635ff9575bb2e909eab18&imgtype=0&src=http%3A%2F%2Fwww.fzlqqqm.com%2Fuploads%2Fallimg%2F20150207%2F20150207125610343.jpg" alt="">
        </el-col>
        <el-col :span="18">
          <p>{{item.bankName}}</p>
          <p>尾号{{item.bankCardNo.substring(item.bankCardNo.length-4)}}储蓄卡</p>
          <span class="delete" @click="deleteCar(item.id)"><i class="el-icon-delete"></i> 删除</span>
        </el-col>
      </el-row>
    </div>
    <div class="userFoot">
      <!--确认-->
      <el-row :span="24" class="submit">
        <el-button type="success" @click.native="getSubmit()">添加银行卡</el-button>
      </el-row>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        bankCardList: []
      }
    },
    methods: {
      getSubmit () { // 跳转到
        this.$router.push('/user/addcard')
      },
      deleteCar (carId) {
        this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/deleteBankCard.shtml', {token: this.$store.state.token, id: carId}, {
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          emulateJSON: true
        }).then((data) => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000,
            showClose: false
          })
          this.$router.push('/user')
        }, (ne) => {
          this.$message({
            message: '网络错误',
            type: 'error',
            duration: 1000,
            showClose: false
          })
        })
      }
    },
    created () {
      //  获取银行卡信息
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/bankCardList.shtml', { token: this.$store.state.token }, {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => {
        this.bankCardList = data.body.bankCardList
        console.log(data)
      }, (ne) => {
        this.$message({
          message: '网络错误',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    }
  }
</script>

<style lang="scss" type="stylesheet/scss">
  .userBankCard{
    font-size: 14px;
    background-color:#f5f3f3;
    height: 615px;
    text-align: left;
    .delete{
    position: absolute;
    top: 7px;
    right: 10px;
    }
  .bankCardMain{
  .projects{
    background-color:#fff;
    border-bottom: 1px solid #cec8c8;
    .el-col{
      padding: 5px 15px;
      line-height: 26px;
    }
  }
    .userImg{
      width: 65px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .userFoot{
      .submit{
        margin-top: 20px;
        padding: 0 15px;
      .el-button--success{
        width: 100%;
      }
      }
  }
  }

</style>
